<!-- Footer -->
<div *ngIf="project_data" style="position:fixed; bottom:0; left:-200px; padding-left:200px; right:-200px; padding-right:200px; background-color:#d0d0d0; z-index:5; color:#000000;">
  Project:<b>{{project_data.name}}</b> <button type="button" class="btn btn-xs btn-default pull-right" (click)="onClickImport(project_data.id)">Import Session into {{project_data.name}}</button>
</div>

<!-- Dialogs -->
<set-frame-dialog #setframedialog></set-frame-dialog>

<!-- Modal Dialog to Import Session from JSON -->
<div id="importSessionModal" class="modal-dialog-container">
  <div class="modal-dialog">
  <div class="modal-dialog-header">
    <h1>Import Session</h1>
  </div>
  <div class="modal-dialog-content">
    Session JSON File: <input type="file" (change)="fileChangeEvent($event)">
    <div class="alert alert-danger" *ngIf="import_session_error"><strong>Error!</strong> {{import_session_error}}</div>
  </div>
  <div class="modal-dialog-footer">
    <button [disabled]="working" (click)="onImportSessionFromJSON()" type="button" class="btn btn-wide btn-apply"><i class="fa fa-sign-out"></i> Import</button>
    <button [disabled]="working" (click)="onCancelImportSessionFromJSON()" type="button" class="btn btn-wide btn-cancel">Cancel</button>
  </div>
  </div>
</div>

<!-- Page Content -->
<h4 *ngIf="loading"><i class="fa fa-spinner fa-pulse fa-fw"></i> Loading...</h4>

<div *ngIf="project_data">
  <h4><span class="fw-semi-bold"><strong>Capture Archive</strong> for project <strong>{{project_data.name}}</strong></span></h4>


  <div *ngFor="let session of project_data.sessions; trackBy:trackById">

    <div style="color: #000; padding:8px; margin-top:6px; margin-bottom:4px; background-color:#C5C5C5;">
      <h4 style="display:inline-block;">Session {{session.name}}</h4>
      <a class="pull-right" [routerLink]=" ['/app/review/session/archive-session', session.id] ">Details</a>
    </div>

    <div *ngFor="let shot of session.shots; trackBy:trackById">
      <div *ngFor="let take of shot.takes; trackBy:trackById">

        <div *ngIf="show_empty_takes || take.cameras.length>0">

        <h3><span *ngIf="!take.write_access" class="badge badge-danger"><i class="fa fa-lock"></i></span></h3> 

        <div style="color:#000; background-color: #F5F5F5; height: 1.6em; padding: 3px;">
          <div style="display: inline-block;">
            <img *ngIf="take.max_frame_count>1 && !take.is_burst" class="logo" src="{{icon_movie}}" height="20" alt="Sequence" title="{{take.max_frame_count}} frames sequence">
            <img *ngIf="take.max_frame_count==1" class="logo" src="{{icon_single}}" height="20" alt="Single" title="Single Image">
            <img *ngIf="take.max_frame_count>1 && take.is_burst && !take.is_scan_burst" class="logo" src="{{icon_burst}}" height="20" alt="Burst" title="Burst: {{take.max_frame_count}} frames">
            <img *ngIf="take.max_frame_count>1 && take.is_scan_burst" class="logo" src="{{icon_scan}}" height="20" alt="Scan" title="Scan: {{take.max_frame_count}} frames">                
            {{shot.name}} <b>{{take.name}}</b>
            <small>{{take.capture_time | date:'medium'}} <B>{{take.total_size | dataSize}}</B> DB#{{take.id}}</small>

            <label class="btn" [class.btn-apply]="take.flag=='best'">
              <input type="checkbox" autocomplete="off" [checked]="take.flag=='best'" (click)="toggleTakeFlag($event, take, 'best');"> <i class="fa fa-thumbs-o-up"></i> Best
            </label>
            <label class="btn" [class.btn-destructive]="take.flag=='bad'">
              <input type="checkbox" autocomplete="off" [checked]="take.flag=='bad'" (click)="toggleTakeFlag($event, take, 'bad');"> <i class="fa fa-thumbs-o-down"></i> Bad
            </label>
            <label *ngIf="take.max_frame_count==1" class="btn" [class.btn-primary]="take.flag=='calib'">
              <input type="checkbox" autocomplete="off" [checked]="take.flag=='calib'" (click)="toggleTakeFlag($event, take, 'calib');"> <i class="fa fa-crosshairs"></i> Calib
            </label>
            <label *ngIf="take.max_frame_count==1" class="btn" [class.btn-primary]="take.flag=='colorchart'">
              <input type="checkbox" autocomplete="off" [checked]="take.flag=='colorchart'" (click)="toggleTakeFlag($event, take, 'colorchart');"> <i class="fas fa-tachometer"></i> ColorChart
            </label>
          </div>
        </div>

        <div>
          <span class="badge badge-success" [class.badge-danger]="take.cameras.length==0">{{take.cameras.length}} cameras</span>
          <span class="badge badge-info" *ngIf="take.frontal_cam_uid">Front:{{take.frontal_cam_uid}}</span>
          <span class="badge badge-danger" *ngIf="take.frontal_cam_uid==null">No Frontal Camera Selected</span>
          <span class="badge badge-warning" *ngIf="take.export_path==null">Not exported</span>
          <copy-path *ngIf="take.export_path" [path]="take.export_path" [width]="'300px'"></copy-path>
        </div>        

        <job_label_list (onJobDetails)="selected_job_id = $event;" [jobs]="take.related_jobs"></job_label_list>
        
        <small *ngIf="take.cameras.length>0">          
          <div style="display: inline-block; vertical-align:top;" *ngIf="take.video_thumb">
            <div>Ximea Preview</div>
            <videoplaceholder [width]="180" [src]="'/static/thumb/' + take.video_thumb"></videoplaceholder>
          </div>
          <div style="text-align:center; display: inline-block; vertical-align:top;" *ngIf="take.frontal_camera">
            <div>Ximea at <frametime [time]="0" [framerate]="take.frontal_camera.framerate"></frametime></div>
            <rotate_img [angle]="take.frontal_camera.rotation" [width]="160" [src]="'/static/thumb/'+take.frontal_camera.thumbnail_filename"></rotate_img>
          </div>
        </small>
      
        <div style="display: inline-block; vertical-align:top;"> 
          <!-- Begin List of Assets -->

          <!-- List of Scan Assets for this Take -->
          <div *ngFor="let scan of take.related_staticscans; trackBy:trackById">
            <!-- Block for one Scan Asset -->
            <div style="background-color:#1d4165; padding:2px; margin-bottom:2px;">
              <div style="display: inline-block; text-align:center;">
                <div>Scan: <span *ngIf="scan.has_tracking">with tracking </span><b>{{scan.name}}</b> #{{scan.id}}</div>
                <img *ngIf="scan.thumbnail_filename" width="160" height="auto" src="/static/thumb/{{scan.thumbnail_filename}}">
              </div>
              <div *ngIf="scan.has_tracking">
                <ng-template ngFor let-frame [ngForOf]="scan_frame_list">
                  <div style="text-align:center; display: inline-block; vertical-align:top; width:120px; background-color:#404040;">
                    <div>{{frame.name}}</div> 
                    <div *ngIf="take.frontal_camera">
                      <div>
                        <frametime *ngIf="scan[frame.key]!=null" [time]="scan[frame.key]" [framerate]="take.frontal_camera.framerate"></frametime>
                        <a (click)="editFrameNumber(scan, frame.name, frame.key, scan[frame.key]);">Edit</a>
                      </div>
                      <img width="120" height="auto" src="/static/thumb/{{scanAssetThumbfile(scan.thumbnail_filename, take.frontal_camera.framerate, scan[frame.key])}}">
                    </div>
                  </div>
                </ng-template> 
              </div>
            </div>
          </div>

          <!-- List of Tracking Assets for this Take -->
          <div *ngFor="let asset of take.related_trackingassets; trackBy:trackById">
            <!-- Block for one Tracking Asset -->
            <div style="background-color:#5c1d65; padding:2px; margin-bottom:2px;">
                <div style="display: inline-block; text-align:center;">
                  <div>Sequence: <b>{{take.name}}</b> #{{asset.id}}</div>
                    <div style="display: inline-block; vertical-align:top;" *ngIf="asset.video_thumb">
                      <videoplaceholder [width]="180" [src]="'/static/thumb/' + asset.video_thumb"></videoplaceholder>
                    </div>
                </div>
                <ng-template ngFor let-frame [ngForOf]="track_frame_list">
                    <div style="text-align:center; display: inline-block; vertical-align:top; width:120px; background-color:#404040;">
                      <div>{{frame.name}}</div> 
                      <div *ngIf="take.frontal_camera">
                        <div>
                          <frametime *ngIf="asset[frame.key]!=null" [time]="asset[frame.key]" [framerate]="take.frontal_camera.framerate"></frametime>
                          <a (click)="editFrameRange(asset, frame.name, frame.key, asset[frame.key]);">Edit</a>
                        </div>
                        <img width="120" height="auto" src="/static/thumb/{{trackingAssetThumbfile(asset.id, take.frontal_camera.framerate, asset[frame.key])}}">
                      </div>
                    </div>
                </ng-template>
              </div>
          </div>
        </div>
      </div> <!-- End List of Assets -->
            
      </div>
    </div>
  </div>

</div>

<job_infopanel [job_id]="selected_job_id" (onHideJobDetails)="selected_job_id=0"></job_infopanel>